<template>
  <div class="level_review">
    <div class="review_con">
      <!--      logo-->
      <img class="review_logo" src="../../assets/image/pretest/tit.png" alt="">
      <!--      分数框-->
      <div class="review_achie">

      </div>
      <!--      评审中-->
      <div class="review_state">
        学能级别评审中
      </div>
      <!--      家长陪同和页脚-->
      <template v-if="false">
        <!--      家长陪同-->
        <div class="accompany">
          家长陪同
        </div>
        <!--      页脚提示-->
        <div class="footnotes">
          <img src="../../assets/image/pretest/explain.png" alt="">
          当前系统需要家长进行陪同，绑定手机号让学生得到全面提高训练
        </div>
      </template>
      <!--    家长陪同填写完成-->
      <template v-else>
        <div class="an_succ">
          <img class="an_succ_img" src="../../assets/image/pretest/an_ssucc.png" alt="">
          <span class="an_succ_info">陪同录入完成请等待评审结果</span>
        </div>
      </template>
      <!--      家长陪同-->
      <div class="accom_parents">
        <!--        未填写消息-->
        <template v-if="true">
          <div class="parents_tit">
            家长陪同
          </div>
          <div class="parents_form">
            <el-form :model="forgetForm" ref="forgetForm" label-width="1.3rem" class="demo-ruleForm">
              <span style="font-size: 0.16rem; color: #3f3f3f">手机号</span>
              <el-form-item>
                <img class="line" src="../../assets/image/login/line.png" alt="">
                <el-input ref="phone" style="font-size: 0.2rem" v-model="forgetForm.phone"
                          placeholder="家长手机号"></el-input>
              </el-form-item>
              <span style="font-size: 0.16rem; color: #3f3f3f">验证码</span>
              <el-form-item class="forget_code">
                <el-input v-model="forgetForm.code" placeholder="请输入验证码"></el-input>
                <div class="code_btn" :style="{background: (codeNum === '获取验证码'? '' : '#f9f9ff')}" @click="codeBtn">
                  {{ codeNum | codeNum }}
                </div>
              </el-form-item>

              <div class="forget_btn" @click="forgetBtn">
                提交
              </div>

            </el-form>
          </div>
        </template>
        <!--        家长陪同输入手机号完成-->
        <div class="parents_succ" v-else>
          <img class="succ_img" src="../../assets/image/pretest/succ.png" alt="">
          <div class="succ_one">完成</div>
          <div class="succ_tow">请等待结果, 评审中...</div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import {isPoneAvailable} from "@/config/utils";

export default {
  name: "levelReview",
  data() {
    return {
      // 验证码倒计时
      codeNum: '获取验证码',
      // 验证码通过
      adoptCode: false,
      forgetForm: {
        phone: '',
        code: ''
      },
    }
  },
  filters: {
    codeNum(num) {
      if (num === '获取验证码') {
        return num
      }
      return num + '秒'
    }
  },
  methods: {
    codeBtn() {
      // 手机号校验
      if (!this.forgetForm.phone) {
        return this.$message({message: '手机号不能为空！', type: 'error'})
      }
      if (!isPoneAvailable(this.forgetForm.phone)) {
        return this.$message({message: '请输入正确的手机号！', type: 'error'})
      }
      // 发送验证码
      this.$request({
        method: 'POST',
        url: 'send_sms',
        data: {
          phone: this.forgetForm.phone,
          name: 'forget_password'
        }
      }).then(({data}) => {
        if (data.code === 200) {
          this.adoptCode = true
          this.$message({message: '信息发送成功！', type: 'success'})
          if (this.codeNum === '获取验证码') {
            this.codeNum = 60
            let codeTime = setInterval(() => {
              this.codeNum -= 1
              if (this.codeNum === 0) {
                clearInterval(codeTime)
                this.codeNum = '获取验证码'
              }
            }, 1000)
          }
        }
      })
    },
    // 提交
    forgetBtn() {
      let that = this
      // 如果验证码通过校验发请求，拦截不必要的请求
      if (that.adoptCode) {
        let {phone, code} = that.forgetForm
      }

    }
  }
}
</script>

<style lang="less" scoped>
.level_review {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/pretest/review.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .review_con {
    display: flex;
    flex-direction: column;
    align-items: center;;
    padding-top: 0.75rem;
    margin: 0 auto;
    width: 6rem;
    height: 100%;

    .review_logo {
      width: 2.49rem;
      height: 0.67rem;
    }

    .review_achie {
      margin: 1.47rem 0 0.97rem 0;
      width: 2.91rem;
      height: 2.91rem;
      background: url("../../assets/image/pretest/achie.png") no-repeat;
      background-size: 100% 100%;
    }

    .review_state {
      width: 2.45rem;
      height: 0.24rem;
      font-size: 0.21rem;
      text-align: center;
      color: #393939;
      background: url("../../assets/image/pretest/state.png") no-repeat;
      background-size: 100% 100%;
    }

    .accompany {
      margin: 1.53rem 0 0.46rem 0;
      width: 1.56rem;
      height: 0.54rem;
      line-height: 0.54rem;
      color: #fff;
      font-size: 0.18rem;
      text-align: center;
      background: linear-gradient(-74deg, #FF4445 0%, #FF6B6C 100%);
      box-shadow: 0px -4px 0px 0px #FF8182;
      border-radius: 0.27rem;
      cursor: pointer;
    }

    .footnotes {
      font-size: 0.14rem;
      color: #6E76D7;
      height: 0.4rem;
      line-height: 0.4rem;

      & > img {
        width: 0.2rem;
        vertical-align: middle;
      }
    }

    .an_succ {
      margin-top: 1.1rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      .an_succ_img {
        margin-bottom: 0.25rem;
        width: 1rem;
        height: 1rem;
      }

      .an_succ_info {
        font-size: 0.18rem;
        color: #FF5040;
      }
    }

    // 家长陪同
    .accom_parents {
      position: absolute;
      top: 3.4rem;
      padding: 0 1.24rem 0.62rem 1.24rem;
      width: 5.79rem;
      height: 4.19rem;
      font-size: 0.18rem;
      background: linear-gradient(0deg, #E6F1FF 0%, #FFFFFF 100%);
      box-shadow: 0px 3px 24px 0px rgba(179, 183, 236, 0.41);
      border-radius: 0.1rem;
      box-sizing: border-box;

      .parents_tit {
        height: 1rem;
        line-height: 1rem;
        font-weight: 700;
        text-align: center;
        color: #3F3F3F;
      }

      .parents_form {
        .el-form-item {
          position: relative;
          margin-bottom: 0 !important;

          .line {
            position: absolute;
            right: 0.1rem;
            top: 0.2rem;
            width: 1rem;
            height: 1px;
            z-index: 10 !important;
          }

          /deep/ .el-input {
            font-size: 0.16rem !important;
            width: 100% !important;
          }
        }

        //验证码框
        .forget_code {
          /deep/ .el-input {
            font-size: 0.16rem !important;
            width: 2.04rem !important;
          }

          .code_btn {
            margin: auto 0 auto 0.1rem;
            width: 1.32rem;
            font-size: 0.16rem;
            height: 0.57rem;
            line-height: 0.57rem;
            text-align: center;
            border-radius: 0.05rem;
            color: #333;
            cursor: pointer;
            border: 2px solid #C9CCED;
          }
        }

        // 提交按钮
        .forget_btn {
          margin-top: 0.1rem;
          width: 3.29rem;
          height: 0.55rem;
          line-height: 0.55rem;
          text-align: center;
          font-size: 0.18rem;
          color: #fff;
          border-radius: 0.1rem;
          background: #414cc2;
          cursor: pointer;
        }
      }

      .parents_succ {
        display: flex;
        flex-direction: column;
        align-items: center;

        .succ_img {
          margin: 1.42rem 0 0.65rem 0;
          width: .86rem;
          height: 0.63rem;
        }

        .succ_one {
          font-size: 0.24rem;
          height: 0.6rem;
          color: #3f3f3f;
        }

        .succ_tow {
          font-size: 0.18rem;
          color: #2D90FF;
        }
      }
    }
  }

}
</style>
